<template>
  <div class="h-full overflow-hidden">
    <n-card title="表格" class="h-full shadow-sm rounded-16px">
      <n-space :vertical="true">
        <loading-empty-wrapper class="h-480px" :loading="loading">
          <n-data-table :columns="columns" :data="dataSource || []" :flex-height="true" class="h-480px" />
        </loading-empty-wrapper>
      </n-space>
    </n-card>
  </div>
</template>

<script setup lang="tsx">
import { NSpace, NButton, NPopconfirm } from 'naive-ui';
import type { DataTableColumn } from 'naive-ui';
import { useFetch } from '@vueuse/core';

const { data: dataSource, isFetching: loading, execute } = useFetch(`${import.meta.env.VITE_API}/knowledge`).json();

const columns: DataTableColumn[] = [
  {
    title: '标题',
    key: 'title',
    align: 'center'
  },
  {
    key: 'action',
    title: '操作',
    align: 'center',
    render: row => {
      return (
        <NSpace justify={'center'}>
          <NPopconfirm
            onPositiveClick={async () => {
              await useFetch(`${import.meta.env.VITE_API}/knowledge/${row.id}`).delete();
              execute();
            }}
          >
            {{
              default: () => '确认删除',
              trigger: () => <NButton size={'small'}>删除</NButton>
            }}
          </NPopconfirm>
        </NSpace>
      );
    }
  }
];
</script>

<style scoped></style>
